<template>
  <div>
    <el-descriptions title="我的信息">
      <el-descriptions-item label="名称：">
        <el-tag size="small">{{ userInfo.memberName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="手机号码：">
        <el-tag size="small">{{ userInfo.memberPhone }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="性别：">
        <el-tag size="small">{{ userInfo.memberSex == 1 ? '男' : '女' }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="年龄：">
        <el-tag size="small">{{ userInfo.memberAge }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="生日：">
        <el-tag size="small">{{ userInfo.birthday }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="我的会员信息">
      <el-descriptions-item label="加入健身房时间：">
        <el-tag size="small">{{ this.$dayjs(userInfo.nenberDate).format("YYYY-MM-DD") }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="上次续费时间：">
        <el-tag size="small">{{ this.$dayjs(userInfo.memberxufei).format("YYYY-MM-DD") }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="余额：">
        <el-tag size="small">{{ userInfo.memberbalance }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="会员卡类型：">
        <el-tag size="small">{{ userInfo.membertypes.typeName }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="会员卡到期时间：">
        <el-tag size="small">{{
          this.$dayjs(userInfo.memberxufei).add(userInfo.membertypes.typeDay, 'day').format("YYYY-MM-DD") }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import cookie from 'js-cookie'
import { Descriptions, DescriptionsItem, Tag, Divider } from 'element-ui'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Descriptions, DescriptionsItem, Tag, Divider },
  data () {
    //这里存放数据
    return {
      userInfo: {
        memberId: '',
        memberName: '',
        memberPhone: '',
        memberSex: '',
        memberAge: '',
        birthday: '',
        nenberDate: '',
        membertypes: {
          typeId: '',
          typeName: '',
          typeciShu: '',
          typeDay: '',
          typemoney: ''
        },
        memberStatic: '',
        memberbalance: '',
        memberxufei: '',
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initUserInfo () {
      let userInfo = cookie.get('userInfo')
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initUserInfo();
  },
}
</script>
<style scoped></style>